@extends('family::layout')

@section('title', '评测列表')

@section('content')

<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12" id="chart"></div>
</div>

@stop

@section('script')
    <script>

        function createConfig(data, title) {
            var timeFormat = 'MM/DD/YYYY HH:mm';

            return {
                type: 'line',
                data: {
                    //labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    datasets: data
                },
                options: {
                    title: {
                        display:true,
                        text: title
                    },
                    scales: {
                        xAxes: [{
                            type: 'time',
                            time: {
                                parser: timeFormat,
                                // round: 'day'
                                tooltipFormat: 'll HH:mm'
                            },
                            scaleLabel: {
                                display: true,
                                labelString: '评估时间'
                            }
                        }],
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: '评估值'
                            },
                            ticks: {
                                beginAtZero: true,
                                stepSize: 0.5,
                            }

                        }]
                    },
                }
            };
        }

        $("document").ready(function(){
            var container = document.querySelector('#chart');

        $.get('{{route("family.assessment.ajaxdata",['child_id'=>$child_id])}}', function (data) {
            var colorNames = Object.keys(window.chartColors);

            console.log(colorNames);

            if (data.status == 200){
                console.log(data.data);
                var result = data.data;
                var colorNum = 0;

                $.each(result,function(i,val){
                    var age = {};

                    var colorName = colorNames[colorNum % colorNames.length];
                    colorNum++;


                    age.borderColor =  window.chartColors[colorName];
                    age.backgroundColor = window.chartColors[colorName];
                    age.fill = false;
                    age.label = val.age.label;
                    age.data = val.age.data;

                    var agedevelop = {};
                    var colorName = colorNames[colorNum % colorNames.length];
                    colorNum++;

                    agedevelop.borderColor =  window.chartColors[colorName];
                    agedevelop.backgroundColor = window.chartColors[colorName];
                    agedevelop.fill = false;
                    agedevelop.label = val.agedevelop.label;
                    agedevelop.data = val.agedevelop.data;

                    //console.log();
                    var thisconfig = createConfig([age, agedevelop], val.name);

                    console.log('colorNum:' + 'line-chart'+i);
                    console.log(thisconfig);

                    var div = document.createElement('div');
                    div.classList.add('info-box');

                    var canvas = document.createElement('canvas');
                    div.appendChild(canvas);
                    container.appendChild(div);

                    var ctx = canvas.getContext('2d');
                    var chart = new Chart(ctx, thisconfig);

                })
            }

        })


        })
    </script>
@stop